<template>
  <div class="personrec">
    <div class="title">人气推荐</div>
    <ul>
      <li
        v-for="item in hotGoodsList"
        :key="item.id"
        @click="goProductdetail(item.id)"
      >
        <div class="image">
          <img
            v-lazy="item.list_pic_url"
            width="100%"
            style="display: block"
            alt=""
          />
        </div>
        <div class="text">
          <h4>{{ item.name }}</h4>
          <h5>{{ item.goods_brief }}</h5>
          <p>￥ {{ item.retail_price  }}.00元</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Person",
  /* props: ['hotGoodsList'], */
  /* methods: {
    // 跳转到商品详情页
    async goToDetail(id) {
      await this.$router.push('/productdetail/' + id)
    }
  } */
  mounted() {
    this.$store.dispatch("getHomeDB");
  },
  computed: {
    ...mapGetters(["hotGoodsList"]),
  },
  methods: {
     goProductdetail(id){
           this.$router.push("/Productdetail/" + id);
      }
  },
};
</script>

<style lang="less" scoped>
.personrec {
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.title {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 0.2rem;
}
ul {
  li {
    background: #fafafa;
    margin-bottom: 5px;
    overflow: hidden;
    .image {
      float: left;
      width: 30%;
    }
    .text {
      float: left;
      width: 70%;
      height: 100%;
      h4 {
        height: 40px;
        line-height: 40px;
        font-weight: normal;
        font-size: 0.18rem;
      }
      h5 {
        height: 30px;
        line-height: 30px;
        font-weight: normal;
      }
      P {
        margin-top: 10px;
        color: darkred;
        font-size: 0.13rem;
      }
    }
  }
}
</style>